<template>
  <div
    class="order-stat"
    :class="`order-stat-${option.type}`"
  >
    <p class="title">{{ option.title }}</p>
    <div class="all">
      <p class="num">{{ option.total }}</p>
      <span class="text">{{ option.totalName }}
        <el-tooltip placement="topLeft">
          <template #title>
            <span>{{ option.tips }}</span>
          </template>
          <span style="color: #868686; padding-left: 4px; font-size: 14px"><el-icon><Search /></el-icon></span> </el-tooltip></span>
    </div>
    <el-row
      type="flex"
      align="middle"
      class="row"
    >
      <el-col
        v-for="(item, index) in option.children"
        :key="index"
        :span="24 / option.children.length"
        class="item"
      >
        <p class="num">{{ item.data }}</p>
        <span class="text">{{ item.label
        }}<el-tooltip placement="topLeft">
          <template #title>
            <span>{{ item.tips }}</span>
          </template>
          <span style="color: #868686; padding-left: 4px; font-size: 14px" /> </el-tooltip></span>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<style lang="scss" scoped>
.order-stat {
  height: 290px;
  box-sizing: border-box;
  background: url(https://saas.jitangcn.com/images/li/order_ddtj.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 12px;
  padding: 20px;
  line-height: 1;
  &-1 {
    background: url(https://saas.jitangcn.com/images/li/order_ycjddtj.png)
      no-repeat;
  }
  .title {
    font-weight: 600;
    font-size: 18px;
  }
  .all {
    margin-top: 25px;
    text-align: center;
    .num {
      font-size: 48px;
      line-height: 1.3;
    }
    .text {
      margin-top: 10px;
      font-size: 16px;
      color: #868686;
    }
  }
  .row {
    margin-top: 25px;
    height: 98px;
    border: 1px solid #eee;
    padding: 16px 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    .item {
      text-align: center;
      border-right: 1px solid #eee;
      &:nth-child(4n) {
        border-right: 0;
      }
    }
    .title {
      border-right: 1px solid #eee;
    }
    .num {
      margin-bottom: 5px;
      font-size: 28px;
    }
    .title {
      font-size: 14%;
      color: #868686;
    }
  }
}
</style>
